<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import type { Props } from './utils/types'

const $props = defineProps<Props>()

const chunkDom = shallowRef<null | HTMLDivElement>(null)

const $router = useRouter()

function onGoLeft() {
    if (!chunkDom.value) return
    const scrollLeft = chunkDom.value.scrollLeft
    chunkDom.value.scrollTo({
        left: scrollLeft - 300,
        behavior: 'smooth'
    })
}

function onGoRight() {
    if (!chunkDom.value) return
    const scrollLeft = chunkDom.value.scrollLeft
    chunkDom.value.scrollTo({
        left: scrollLeft + 300,
        behavior: 'smooth'
    })
}

const isShowLeftBtn = shallowRef<boolean>(false)

const isShowRightBtn = shallowRef<boolean>(true)

onMounted(() => {
    if (!chunkDom.value) return
    chunkDom.value.addEventListener('scroll', function () {
        // div 内已滚动的距离
        let scrollLeft = this.scrollLeft
        let scrollWidth = this.scrollWidth
        // 是否到达底部
        let isScrollBottom = Math.ceil(scrollLeft) == scrollWidth - this.clientWidth
        // 是否到达顶部
        let isScrollTop = scrollLeft == 0

        if (isScrollBottom) {
            isShowRightBtn.value = false
        } else {
            isShowRightBtn.value = true
        }

        if (isScrollTop) {
            isShowLeftBtn.value = false
        } else {
            isShowLeftBtn.value = true
        }

    })
})

function handleJumpFontAlbum(id: number) {
    window.open($router.resolve(`/font-gather/${id}`).href, '_blank')
}
</script>

<template>
    <div class="content-font">
        <div class="chunk" ref="chunkDom">
            <div class="chunk-item" v-for="item in list" :key="item.id">
                <div class="chunk-item-content" :style="{ backgroundImage: `url('${item.image}')` }">
                    <h1>{{ item.title }}</h1>
                    <button @click="handleJumpFontAlbum(item.id)">进入专辑</button>
                </div>
            </div>
        </div>
        <div class="btn">
            <button @click="onGoLeft" v-show="isShowLeftBtn">
                <el-icon color="var(--primary-color)">
                    <ArrowLeftBold />
                </el-icon>
            </button>
            <button @click="onGoRight" v-show="isShowRightBtn">
                <el-icon color="var(--primary-color)">
                    <ArrowRightBold />
                </el-icon>
            </button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content-font {
    position: relative;

    .chunk {
        white-space: nowrap;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .chunk-item {
            display: inline-block;
            width: 300px;
            height: 200px;
            border-radius: 5px;
            background-color: rgb(0, 0, 0);
            color: rgba(16, 16, 16, 1);
            position: relative;
            overflow: hidden;

            &:not(&:last-child) {
                margin-right: 36px;
            }

            .chunk-item-content {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                cursor: default;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                background-size: cover;
                background-position: center;

                h1 {
                    font-size: 24px;
                    font-weight: 700;
                    color: rgba(255, 255, 255, 1);
                }

                button {
                    display: none;
                    margin-top: 10px;
                    border: 1px solid #ffffff;
                    background-color: transparent;
                    color: #ffffff;
                    padding: 0 8px;
                    border-radius: 5px;
                    font-size: 13px;
                    line-height: 28px;
                    cursor: pointer;
                }

                &:hover {
                    button {
                        display: block;
                    }
                }
            }
        }
    }



    .btn {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);

        button {
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: none;
            cursor: pointer;

            &:first-child {
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            &:last-child {
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}
</style>